<template>
    <base-breadcrumb :title="$route.meta.title">
        <!-- 租赁房产管理编辑 -->

        <a-spin :spinning="loading">
            <a-form-model
                ref="ruleForm"
                :model="form"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                :rules="editModel != 0 ? rules : {}"
            >
                <!-- 表单 -->
                <a-card :bordered="false">
                    <title-name title="基本信息" />
                    <!-- <a-form-model
                        ref="ruleForm"
                        :model="form"
                        :label-col="{ span: 6 }"
                        :wrapper-col="{ span: 18 }"
                        :rules="editModel != 0 ? rules : {}"
                    > -->
                    <custom-form :form-list="formList" :form="form" :edit-model="editModel == 0 ? '' : ''" />
                    <!-- </a-form-model> -->
                </a-card>
                <a-card :bordered="false">
                    <!-- 附件上传 -->
                    <title-name title="附件" />
                    <!-- <a-form-model
                        ref="ruleformFile"
                        :model="form"
                        :rules="rulesFile"
                        :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                        :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
                    > -->
                    <a-row :gutter="24">
                        <a-col v-if="editModel != 0" :md="24" :sm="24">
                            <a-form-model-item label="*房屋租赁合同" prop="hlcs">
                                <l-table count="5" business-code="OF05" :upload-arrys.sync="form.hlcs" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-else :md="24" :sm="24">
                            <a-form-model-item label="*房屋租赁合同" prop="hlcs">
                                <file-link :file-list="form.hlcs" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-if="editModel != 0" :md="24" :sm="24">
                            <a-form-model-item label="*房屋所有权证书" prop="hocs">
                                <l-table count="5" business-code="OF05" :upload-arrys.sync="form.hocs" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-else :md="24" :sm="24">
                            <a-form-model-item label="*房屋所有权证书" prop="hocs">
                                <file-link :file-list="form.hocs" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-if="editModel != 0" :md="24" :sm="24">
                            <a-form-model-item label="*出租人身份证或营业执照" prop="icobls">
                                <l-table count="5" business-code="OF05" :upload-arrys.sync="form.icobls" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-else :md="24" :sm="24">
                            <a-form-model-item label="*出租人身份证或营业执照" prop="icobls">
                                <file-link :file-list="form.icobls" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-if="editModel != 0" :md="24" :sm="24">
                            <a-form-model-item label="房屋现有装修及设施设备情况">
                                <l-table count="5" business-code="OF05" :upload-arrys.sync="form.edfs" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-else :md="24" :sm="24">
                            <a-form-model-item label="房屋现有装修及设施设备情况">
                                <file-link :file-list="form.edfs" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-if="editModel != 0" :md="24" :sm="24">
                            <a-form-model-item label="授权委托书">
                                <l-table count="5" business-code="OF05" :upload-arrys.sync="form.poas" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-else :md="24" :sm="24">
                            <a-form-model-item label="授权委托书">
                                <file-link :file-list="form.poas" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-if="editModel != 0" :md="24" :sm="24">
                            <a-form-model-item label="房屋共有人书面同意声明">
                                <l-table count="5" business-code="OF05" :upload-arrys.sync="form.wcsts" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-else :md="24" :sm="24">
                            <a-form-model-item label="房屋共有人书面同意声明">
                                <file-link :file-list="form.wcsts" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-if="editModel != 0" :md="24" :sm="24">
                            <a-form-model-item label="*会议纪要" prop="meetDocs">
                                <l-table count="5" business-code="OF05" :upload-arrys.sync="form.meetDocs" />
                            </a-form-model-item>
                        </a-col>
                        <a-col v-else :md="24" :sm="24">
                            <a-form-model-item label="*会议纪要" prop="meetDocs">
                                <file-link :file-list="form.meetDocs" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24" :sm="24">
                            <div class="file_prompt ml20">
                                支持格式：.rar .zip doc. docx. xls. pdf. jpg .png，单个附件大小不得超过200M
                            </div>
                        </a-col>
                    </a-row>
                    <!-- </a-form-model> -->
                </a-card>
            </a-form-model>
        </a-spin>
        <!-- 页脚操作栏 -->
        <div class="tool-btns mb20 page-btn-right-top">
            <a-button
                v-if="editModel != 0"
                :loading="loading"
                type="primary"
                class="button_right"
                @click="handleSubmit"
            >
                提交
            </a-button>
            <a-button class="ml20" type="primary" @click="handleClose"> 关闭 </a-button>
        </div>
    </base-breadcrumb>
</template>

<script>
import {
    getLeaseContract,
    removeLeaseContract,
    addLeaseContract,
    updateLeaseContract
} from '@/api/office/propertyManagement' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import TreeSelectOrganization from '@/components/TreeSelectOrganization'
import Selector from '@/components/Select/Selector'
import SelectPersonByProject from '@/components/Select/SelectPersonByProject'
export default {

    extends: new BaseEditPage(),
    data() {
        const lessorTel = (rule, value, callback) => {
            const reg = /^1[3456789]\d{9}$/
            if (!reg.test(value)) {
                callback(new Error('请输入正确的手机号'))
            } else {
                callback()
            }
        }
        return {
            loading: false, // 加载控件
            editModel: 0, // 操作状态:0 查看;1 编辑;2 新增
            form: {
                orgDeptName: '',
                orgDeptId: '',
                orgId: '',
                applicantUser: '',
                payTypeId: '697698462820601861'
            }, // 表单
            rules: {
                applicantUser: [{ required: true, whitespace: true, message: '请选择申请人', trigger: 'change' }],
                statusStr: [{ required: true, message: '请选择状态', trigger: 'change' }],
                placeAddress: [{ required: true, message: '请输入房屋地址', trigger: 'change' }],
                lessorTel: [{ required: true, message: '请输入电话', trigger: 'change' }],
                builtArea: [{ required: true, message: '请输入面积', trigger: 'change' }],
                houseUseId: [{ required: true, message: '请选择房屋用途 ', trigger: 'change' }],
                rentFeeAmount: [{ required: true, message: '请输入租金(元/月) ', trigger: 'change' }],
                payTypeId: [{ required: true, message: '请选择付款方式', trigger: 'change' }],
                leaseDate: [{ required: true, message: '请选择租赁期限', trigger: 'change' }],
                propertyFeeAmount: [{ required: true, message: '请输入物业费(元/月)', trigger: 'change' }],
                lessor: [{ required: true, message: '请输入出租人', trigger: 'change' }],
                hlcs: [{ type: 'array', required: true, message: '请上传文件', trigger: 'blur' }],
                hocs: [{ type: 'array', required: true, message: '请上传文件', trigger: 'blur' }],
                icobls: [{ type: 'array', required: true, message: '请上传文件', trigger: 'blur' }],
                meetDocs: [{ type: 'array', required: true, message: '请上传文件', trigger: 'blur' }]
            }, // 校验规则
            rulesFile: {},
            init: false, // 初始化控件
            formCode: '' // 形式选中项code
        }
    },
    watch: {
        // 监听附件实现附件校验
        'form.hlcs'() {
            if (this.editModel != 0 && this.init) {
                this.$nextTick(() => {
                    this.$refs.ruleForm?.validateField('hlcs')
                })
            }
        },
        'form.hocs'() {
            if (this.editModel != 0 && this.init) {
                this.$nextTick(() => {
                    this.$refs.ruleForm?.validateField('hocs')
                })
            }
        },
        'form.icobls'() {
            if (this.editModel != 0 && this.init) {
                this.$nextTick(() => {
                    this.$refs.ruleForm?.validateField('icobls')
                })
            }
        },
        'form.meetDocs'() {
            if (this.editModel != 0 && this.init) {
                this.$nextTick(() => {
                    this.$refs.ruleForm?.validateField('meetDocs')
                })
            }
        }
        // // 监听附件实现附件校验
        // 'form.formId'(e) {
        //     if (this.editModel != 0 && this.init) {
        //         this.$nextTick(() => {
        //             this.form.otherForm = ''
        //         })
        //     }
        // },
    },
    mounted() {
        let userInfo = JSON.parse(sessionStorage.getItem('ycloud-user_info'))
        this.form.orgDeptName =
            (userInfo.currentPost.code === 'PD' ? userInfo.currentPost.orgName + '-' : '') + userInfo.currentPost.name
        this.form.orgDeptId = userInfo.currentPost.id
        this.form.orgId = userInfo.currentPost.id
        this.form.applicantUser = userInfo.employee.id

        this.$route.meta.title = ['租赁房产管理查看', '租赁房产管理编辑', '租赁房产管理新增'][this.editModel]
        // 不为添加时请求详情
        if (this.editModel != 2) {
            this.loading = true
            getLeaseContract(this.id)
                .then((res) => {
                    this.loading = false
                    res.data.leaseDate = []
                    res.data.leaseDate[0] = res.data.leaseDateStart
                    res.data.leaseDate[1] = res.data.leaseDateEnd

                    this.form = { ...res.data }

                    this.$nextTick(() => {
                        this.init = true
                        this.form.applicantUser = res.data.applicantUser
                    })
                })
                .catch(() => {
                    this.loading = false
                })
        } else {
            console.log(this.init)
            this.$nextTick(() => {
                this.init = true
            })
        }
    },
    computed: {
        formList() {
            return [
                {
                    keyName: 'orgDeptName',
                    type: 'BaseInput',
                    label: '单位',
                    disabled: true
                },
                {
                    type: SelectPersonByProject,

                    keyName: 'applicantUser',
                    placeholder: '请选择申请人',
                    label: '申请人',
                    disabled: this.editModel == 0,
                    attrs: {
                        orgId: this.form.orgDeptId,
                        isProject: false,
                        showSearch: true
                    }
                },
                {
                    keyName: 'placeName',
                    type: 'BaseInput',
                    disabled: this.editModel == 0,
                    label: '小区名称'
                },
                {
                    keyName: 'placeAddress',
                    type: 'BaseInput',
                    disabled: this.editModel == 0,
                    label: '房屋地址'
                },
                {
                    keyName: 'houseNum',
                    type: 'BaseInput',
                    disabled: this.editModel == 0,
                    label: '门牌号'
                },
                {
                    keyName: 'builtArea',
                    type: 'BaseInputNumber',
                    disabled: this.editModel == 0,
                    label: '面积(m²)'
                },
                {
                    keyName: 'houseUseId',
                    label: '房屋用途',
                    disabled: this.editModel == 0,
                    type: Selector,
                    attrs: {
                        selectType: '3',
                        urlType: 'office'
                    }
                },
                {
                    keyName: 'rentFeeAmount',
                    type: 'BaseInputNumber',
                    disabled: this.editModel == 0,
                    label: '租金(元/月)'
                },
                {
                    keyName: 'payTypeId',
                    disabled: this.editModel == 0,
                    label: '付款方式',
                    type: Selector,
                    attrs: {
                        selectType: '4',
                        urlType: 'office'
                    }
                },
                {
                    keyName: 'leaseDate',
                    type: 'a-range-picker',
                    disabled: this.editModel == 0,
                    placeholder: ['请选择日期', '请选择日期'],
                    label: '租赁期限',
                    attrs: {
                        valueFormat: 'YYYY-MM-DD'
                    }
                },
                {
                    keyName: 'propertyFeeAmount',
                    type: 'BaseInputNumber',
                    disabled: this.editModel == 0,
                    label: '物业费(元/月)'
                },
                {
                    keyName: 'lessor',
                    type: 'BaseInput',
                    disabled: this.editModel == 0,
                    label: '出租人'
                },
                {
                    keyName: 'lessorTel',
                    type: 'BaseInputNumber',
                    disabled: this.editModel == 0,
                    label: '出租人电话'
                },
                {
                    keyName: 'status',
                    type: 'a-radio-group',
                    disabled: this.editModel == 0,
                    label: '状态',
                    data: [
                        {
                            label: '可用',
                            value: 0
                        },
                        {
                            label: '不可用',
                            value: 1
                        }
                    ]
                }
            ]
        }
    },

    methods: {
        /**
         * 提交表单
         */
        handleSubmit() {
            let that = this
            let api = [updateLeaseContract, addLeaseContract][that.editModel - 1] // 根据操作切换url地址
            // 校验表单
            that.$refs.ruleForm.validate((e) => {
                if (e) {
                    // 提交表单
                    // if (!this.validateFile()) return
                    that.loading = true
                    that.form.leaseDateStart = that.form.leaseDate[0]
                    that.form.leaseDateEnd = that.form.leaseDate[1]
                    let form = that.$clone(that.form)
                    api(form)
                        .then(() => {
                            that.loading = false
                            that.$message.success('提交成功！')
                            that.$multiTab.close()
                        })
                        .catch(() => {
                            that.loading = false
                        })
                }
            })
        },
        handleClose() {
            if (this.isAudit) {
                window.close()
            } else {
                this.$multiTab.close(this.$route.fullpath)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.file_prompt {
    color: #999;
}
</style>